<template>
  <div>
    <div class="header">
      <div class="title">讲台</div>
    </div>
    <div class="box-1">
      <table>
        <tr class="tr-item" v-for="(row,index) in matrix" :key="index">
          <td
              @click="getItemBox(index,cell,indexs)"
              class="item"
              :class="{itemActive:cell.status===1}"
              v-for="(cell,indexs) in row"
              :key="indexs">
            <div class="btn">
              <i v-if="cell.status===1" class="iconfont icon-icon_account"></i>
            </div>
          </td>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
import {removeObj} from "@/utils/ramdon";

export default {
  data(){
    return{
      matrix: [],
      width:25,
      height:10,
      dialogVisible:false,
      isRight:false,
      formLabelAlign: {
        start: '',
        end: '',
      }
    }
  },
  methods:{
    generateMatrix() {
      this.matrix = [];
      for (let i = 0; i < this.height; i++) {
        let row = [];
        for (let j = 0; j < this.width; j++) {
          row.push({id:i * 10 + j,name:'张三',userId:null,isStatus:0,state:1,status:0});
        }
        this.matrix.push(row);
      }
      // console.log(this.matrix)
    },
    getItemBox(row,item,index){
      console.log(row,item,index)
      console.log(this.matrix)
      let array = removeObj(this.matrix,1)
      array.forEach((value,itemIndex)=>{
        value.forEach((value1,index1)=>{
          // console.log(itemIndex,value1,index1)

          if (itemIndex===row && index===index1){
            console.log(value1)
            if (value1.userId){
              if (value1.userId === 1){
                value1.status===1 ? value1.status = 0:value1.status = 1
                value1.userId=null
              }else{
                this.$message.warning('当前座位有人了不能占座')
              }
            }else {
              value1.status === 1 ? value1.status = 0 : value1.status = 1
              value1.userId = 1
            }
          }
        })
      })
    },
    getChecked(row,index){
      console.log(this.matrix)
      this.matrix.forEach((value,itemIndex)=>{
        value.forEach((value1,index1)=>{
          // console.log(itemIndex,value1,index1)
          if (itemIndex===row && index===index1){
            console.log(value1)
            value1.userId = parseInt(Math.random()*1000)
            value1.isStatus=1
            value1.status===1 ? value1.status = 0:value1.status = 1
          }
        })
      })
    }
  },
  mounted() {
    setTimeout(()=>{
      this.getChecked(9,10)
      this.getChecked(8,12)
      this.getChecked(7,13)
      this.getChecked(6,14)
      this.getChecked(5,15)
      this.getChecked(4,16)
      this.getChecked(3,17)
      this.getChecked(2,18)
    },600)

  },

  created() {
    this.generateMatrix();
  },
}
</script>

<style scoped lang="scss">
.header{
  width:100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
  .title{
    width: 150px;
    height: 40px;
    text-align: center;
    border: 1px solid #f6f6f6;
    line-height: 40px;
    font-size: 14px;
    //margin-bottom: 20px;
  }
}
.tip{
  width: 100%;
  font-size: 12px;
  margin-bottom: 15px;
}
.box-1{
  width:100%;
  //display: flex;
  //justify-content: left;
  //transform: scale(0.9);
  overflow-x: scroll;
  padding: 25px;
  box-sizing: border-box;
  .tr-item{
    margin: 10px;
    .item{
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border: 1px solid #dddddd;
      margin: 10px;
      text-align: center;
      line-height: 20px;
      .btn{
        width: 20px;
        height: 20px;
        i{
          color: #fff;
        }
      }

    }
    .itemActive{
      background: #ff5246;
      border: 1px solid #ff5246;
    }
  }
}
</style>
